<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .blog{margin: 10px auto;}
        textarea{margin: 10px;}
        button{margin: 10px;}
        .blog li{
            width: 500px;
            border: 2px solid red;
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="blog">
        <!-- 发布框 -->
        <textarea cols="80" rows="10"></textarea>
        <br>
        <button>发布</button>
        <hr>
        <!-- 展示内容的区域 -->
        <ul class="list"></ul>
    </div>
    <script>
        // 思路:
        // 1.获取 对应的要操作的元素
        // 2.获取到发布的内容
        // 3.点击按钮,将发布的内容放到一个li厘米
        // 4.创建li

        var textarea=document.querySelector('textarea');//发布的
        var button=document.querySelector('button');//发布按钮
        var list=document.querySelector('ul');//显示列表
        var cli=document.createElement('li');//创建li元素

        // 2.点击按钮,判断文本域是否为空.不为空.创建li元素,加载内容.添加到list里面
        button.onclick=function(){
            if(textarea.value !== ""){
                // console.log(textarea.value);拿到文本域的值
                cli.innerHTML=textarea.value;//将拿到的文本域的值赋值给创建li元素当中

                // 注意:最新发布的消息应该在列表的最上面
                list.insertBefore(cli,list.children[0]);
                // console.log(list.children[0]);
                textarea.value="";//清空文本域
            }else{
                alert("请输入内容")
            }
        }
        cli.onclick=function(){
            if(window.confirm("请问你要删除自身吗")){
                cli.remove();
            }
        }

    </script>
</body>
</html>